// import $ from "../../../week8/day40/jd.com/src/js/lib/jquery.esm";

let shop = cookie.get('shop');

shop = JSON.parse(shop);

let idList = shop.map(el => el.id).join();
  console.log(idList);
$.ajax({
  type: "get",
  url: "../interface/shop.php",
  data: { idList },
  dataType: "json"
}).then(res => {
  console.log(res);
  let x=0,y=0,z=0;
  let template = `
   
  <div>
  <img src="./img_03/kua_dian_man_jian.png" alt=""><span>6.15 20点开享,每满300减50</span>
</div>

  `;
  res.forEach((el, i) => {
    let pic = JSON.parse(el.picture);
    let picc = JSON.parse(el.details)
    let current = shop.filter(elm => elm.id === el.id);

    template += `
    <div  class="clear xijie">
    <div>
     <div data-name="xijie" flag="false" id="bg_${x+=1}"></div>
    </div>
    <div>
     <dl>
       <dt><img src="./${pic[0].src}" alt=""> <div><img src="./${pic[0].src}" alt=""><span></span></div></dt>
       <dd>
         <p>
           <a href="#">${el.title}</a>
         </p>
         <div>
           <img src="./img_03/bao_zhang.png" alt="">
           <img src="./img_03/qi_tian.png" alt="">
           <img src="./img_03/xin_yong_ka.png" alt="">
         </div>
       </dd>
     </dl>
    </div>
    <div>
     <p>${picc[0]} </p>
     <span>修改</span>
    </div>
    <div class="danjia">
     <span>￥<em id="one_1">${el.price}</em></span>
    </div>
    <div class="jiajian">
     <dl>
       <dt><span class="jian">-</span><input type="text" value="${current[0].num}" id="input_${y+=1}"><span class="jia">+</span></dt>
       <dd><p>限购7件</p></dd>
     </dl>
    </div>
    <div class="danjia_z">
     <p>￥<em id="two_${z+=1}">${(el.price * current[0].num).toFixed(2)}</em></p>
     <div>进口税：商品已报税</div>
    </div>
    <div>
     <a href="#">移动到收藏夹</a>
     <a href="#" class="removeitem" data-id="${el.id}">删除</a>
    </div>

</div>


    `;
    
  });
  x=0;y=0;z=0;
   
  // $('.list').html(template);
  $('#shangpin_one').html(template);

  $('.removeitem').on('click', function () {
    let res = shop.filter(el => el.id != $(this).attr('data-id')); // 筛选被点击的元素
    cookie.set('shop', JSON.stringify(res)); // 剩余内容写回cookie
    location.reload();// 刷新页面
  });







 
  $(function(){
    $('.jia');$('.jian');$('#zongjianshu');$('.jiesuan');$('.danjia');$('.danjia_z');
       let arr=[],res,arr1=[],res1,val = 1,danjia,danjia_z;
       let jiesuan = $('#jiesuan');
       let zongjia = $('#zongjia');
       let jishu   = $('#jishu');
       let gongji  = $('#gongji');
       let jiesuan_1 = $('#jiesuan_1');
       let zongjia_1 = $('#zongjia_1');
       let result   =  [...$('div[data-name = "xijie"]')];
      //  function isAll(){
      //    return   result  = result.every(el=>$(el).attr('flag') === 'true')
      //  }
      //  function isSome(){
      //   return result = result.some(el=>{return $(el).attr('flag') === 'true'})
      //  }
  

  function panDuan(){
   let val1 ;let val2 ;let val3 ;let one ;let two ;let three;let val4;let four;
   let val5 ;let val6 ;let val7 ;let five ;let six ;let sever;let val8;let eight;
   if($('#a_bg').attr('flag') === 'true' ){
       val1 = Number($('#a_two').html());
       one = Number($('#a_input').val());
   }else{
       val1 = 0;one = 0;
   }
   if($('#b_bg').attr('flag') === 'true' ){
       val2 =  Number($('#b_two').html());;
       two = Number($('#b_input').val());
   }else{
       two = 0;val2 = 0;
   }
   if($('#c_bg').attr('flag') === 'true' ){
       val3 = Number($('#c_two').html());
       three = Number($('#c_input').val());
   }else{
       val3 = 0;three = 0;
   }
   if($('#d_bg').attr('flag') === 'true' ){
       val4 = Number($('#d_two').html());
       four = Number($('#d_input').val());
   }else{
       val4 = 0;four = 0;
   }

   if($('#bg_1').attr('flag') === 'true' ){
    val5 = Number($('#two_1').html());
    one = Number($('#input_1').val());
}else{
    val5 = 0;five = 0;
}
if($('#bg_2').attr('flag') === 'true' ){
    val6 =  Number($('#two_2').html());;
    six = Number($('#input_2').val());
}else{
    six = 0;val6 = 0;
}
if($('#bg_3').attr('flag') === 'true' ){
    val7 = Number($('#two_3').html());
    sever = Number($('#input_3').val());
}else{
    val7= 0;sever = 0;
}
if($('#bg_4').attr('flag') === 'true' ){
    val8= Number($('#two_4').html());
    eight = Number($('#input_4').val());
}else{
    val8 = 0;eight = 0;
}


  //  console.log(val1,val2,val3,val4);

   let top = val1+val2+val3+val4+val5+val6+val7+val8;  //    总价
   let count = one+ two + three+four+five+six+sever+eight; 
   console.log(top,count);  // 数量
         jishu.html(count);
         zongjia.html(top);zongjia_1.html(top);
   return        zongjia_1.html(top);
}
  


       
       function  isHave(){
        let array = []
         result.forEach(element=>{
          if($(element).attr('flag') === 'true'){
            array.push(element)
          }
         })
         if(array.length>0){
          jiesuan.css('background','#FF5C00');
          jiesuan_1.css('background','#FF5C00');
         }else{
            jiesuan.css('background','#908E8E');
           jiesuan_1.css('background','#908E8E');
         }
       }
    // isHave();
      //  jiesuan.css('background','#FF5C00');
      //  jiesuan_1.css('background','#FF5C00');

      // jiesuan.css('background','#908E8E');
      //  jiesuan_1.css('background','#908E8E');
    


     function erlei(){
      arr =Array.from($('div[data-name = "dianpu"]'))  ;
       res = arr.every(el=>{ return  $(el).attr('flag') === 'true';
       })
          if(res  === true ){
           $('#quanxuan').attr('flag','true').css('backgroundImage',`url(./img_03/fu_xuan_kuang_back.png)`);
           $('#all').attr('flag','true').css('backgroundImage',`url(./img_03/fu_xuan_kuang_back.png)`);
          }
     }
    //  全选  
$('#quanxuan').on('click',function(){
if($(this).attr('flag') === 'false'){
  $('[data-name]').attr('flag','true').css('backgroundImage',`url(./img_03/fu_xuan_kuang_back.png)`);
  $('.shangpin').css('border','1px solid #f40').css('background','#FFF9F6');
 $(this).parents('.yilei').siblings('.dianpu').find('.xijie').css('background','#FFF9F6');
 panDuan();
 isHave();
}else{
  $('[data-name]').attr('flag','false').css('backgroundImage',`url(./img_03/fu_xuan_kuang_kong.png)`);
  $('.shangpin').css('border','white').css('background','#F5F5F5');
 $(this).parents('.yilei').siblings('.dianpu').find('.xijie').css('background','#F5F5F5');
 panDuan();
 isHave();
}
})
$('#all').on('click',function(){
  if($(this).attr('flag') === 'false'){
  $('[data-name]').attr('flag','true').css('backgroundImage',`url(./img_03/fu_xuan_kuang_back.png)`);
  $('.shangpin').css('border','1px solid #f40').css('background','#FFF9F6');
 $(this).parents('.sticks').siblings('.dianpu').find('.xijie').css('background','#FFF9F6');
 panDuan();
 isHave();
}else{
  $('[data-name]').attr('flag','false').css('backgroundImage',`url(./img_03/fu_xuan_kuang_kong.png)`);
  $('.shangpin').css('border','white').css('background','#F5F5F5');
 $(this).parents('.sticks').siblings('.dianpu').find('.xijie').css('background','#F5F5F5');
 panDuan();
 isHave();
}
})

//  二  级  
$('div[data-name = "dianpu"]').on('click',function(){
  if($(this).attr('flag') === 'false'){
    $(this).attr('flag','true').css('backgroundImage',`url(./img_03/fu_xuan_kuang_back.png)`);
    $(this).parent().siblings().css('border','1px solid #f40').css('background','#FFF9F6').find('div[data-name = "xijie"]').attr('flag','true').css('backgroundImage',`url(./img_03/fu_xuan_kuang_back.png)`);
   erlei();
   $(this).parent().siblings().find('.xijie').css('background','#FFF9F6');
  //  $(this).parent().siblings().find('div[data-name]').css('background','#FFF9F6')
  panDuan();
  isHave();
  }else{
    $(this).attr('flag','false').css('backgroundImage',`url(./img_03/fu_xuan_kuang_kong.png)`);
    $(this).parent().siblings().css('border','white').css('background','#F5F5F5').find('div[data-name = "xijie"]').attr('flag','false').css('backgroundImage',`url(./img_03/fu_xuan_kuang_kong.png)`);
    $('#quanxuan').attr('flag','false').css('backgroundImage',`url(./img_03/fu_xuan_kuang_kong.png)`);
    $('#all').attr('flag','false').css('backgroundImage',`url(./img_03/fu_xuan_kuang_kong.png)`);
    $(this).parent().siblings().find('.xijie').css('background','#F5F5F5');
    // .css('background','#F5F5F5')
    panDuan();
    isHave();
  }
})

//   三级 
 
$('div[data-name = "xijie"]').on('click',function(){
  if($(this).attr('flag') === 'false'){
    $(this).attr('flag','true').css('backgroundImage',`url(./img_03/fu_xuan_kuang_back.png)`);
    $(this).parents('.xijie').css('background','#FFF9F6');
    // $(this).parents('.shangpin').find('div[data-name]');
    
     arr1 =Array.from( $(this).parents('.shangpin').find('div[data-name]')) ;
     res1 = arr1.every(el=>{ return $(el).attr('flag') === 'true' });
    //  console.log(res1);
     if(res1){
      $(this).parents('.shangpin').siblings('div').find('div[data-name]').attr('flag','true').css('backgroundImage',`url(./img_03/fu_xuan_kuang_back.png)`);
      $(this).parents('.shangpin').css('border','1px solid #f40').css('background','#FFF9F6');
      erlei();
     }
     panDuan();
     isHave();
  }else{
    $(this).attr('flag','false').css('backgroundImage',`url(./img_03/fu_xuan_kuang_kong.png)`);
    $(this).parents('.xijie').css('background','#F5F5F5');
    $(this).parents('.shangpin').siblings('div').find('div[data-name]').attr('flag','false').css('backgroundImage',`url(./img_03/fu_xuan_kuang_kong.png)`);
    $(this).parents('.shangpin').css('border','white').css('background','#F5F5F5');
    $('#quanxuan').attr('flag','false').css('backgroundImage',`url(./img_03/fu_xuan_kuang_kong.png)`);
    $('#all').attr('flag','false').css('backgroundImage',`url(./img_03/fu_xuan_kuang_kong.png)`);
    panDuan();
    isHave();
  }
})

$('#zongjianshu').text(`${$('[data-name = "xijie"]').length}`);



$('.jia').on('click',function(){
 
  if(+$(this).siblings('input').val() <7){
 $(this).siblings('input').val(`${+$(this).siblings('input').val() + 1}`);
 
  }

 let dj = $(this).parents('.jiajian').siblings('.danjia').find('em').text();
 let sl =$(this).siblings('input').val()
$(this).parents('.jiajian').siblings('.danjia_z').find('em').text(`${dj * sl}`);
panDuan();
})
$('.jian').on('click',function(){
  if(+$(this).siblings('input').val() > 1 ){
 $(this).siblings('input').val(`${+$(this).siblings('input').val() - 1}`);
  }
  let dj = $(this).parents('.jiajian').siblings('.danjia').find('em').text();
 let sl =$(this).siblings('input').val();
$(this).parents('.jiajian').siblings('.danjia_z').find('em').text(`${dj * sl}`);

  panDuan();
})
















  })















}).catch(xhr => {
  console.log(xhr.status);
});